<template>
	<div class="formDynamic">
	    <Form :model="formDynamic" :label-width="formDynamic.labelWidth" :ref="formDynamic.ref">
	        <FormItem
	            v-for="(item, key) in formDynamic.items"
	            v-if="item.status"
	            :key="key"
	            :label="item.label"
	            :prop="'items.'+key+ '.value'"
	            :rules="item.rule"
	        >
	            <div v-if = "item.type == 'file'">
	                <!--使用隐藏input，上传图片获取验证机制-->
	                <Input type="text" v-model="item.value" :disabled="true" style='display: none' :name="item.name"></Input>
	                <template v-if="item.value !== ''">
	                    <div class='upload-preview'>
	                        <img :src="item.value">
	                        <div class="upload-cover">
	                            <Icon type="ios-eye-outline" @click.native="item.preview ? item.preview(item) : uploadHandleView(item)"></Icon>
	                            <Icon type="ios-trash-outline" @click.native="item.remove ? item.remove(item) : uploadHandleRemove(item)" v-if="!item.disabled" ></Icon>
	                        </div>
	                    </div>
	                </template>
	                <!--看返回API，是否回带key，有带的话，callback可以抽出来了-->
	                <Upload
	                    v-if="item.value == ''"
	                    :name="key" 
	                    :show-upload-list="false"
	                    :format="item.rule[0].fileFormat"
	                    :max-size="item.rule[0].maxSize"
	                    :on-success="item.success ? item.success : uploadHandleSuccess"
	                    :on-error="item.error ? item.error : uploadHandleError"
	                    :on-format-error="uploadHandleFormatError"
	                    :on-exceeded-size="uploadHandleMaxSize"
	                    :before-upload="uploadHandleBeforeUpload"
	                    :action="item.url"
	                >
	                    <div class="upload-bg">
	                        <Icon type="camera" size="40"></Icon>
	                    </div>
	                </Upload>
	            </div>
	            <div v-else>
	                <Input :type="item.type" v-model="item.value" :placeholder="item.placeholder" :disabled="item.disabled" :name="item.name">
	                    <span slot="prepend"  v-if="item.icon">
		                  <Icon :size="item.icon.size" :type="item.icon.type"></Icon>
		                </span>
	                </Input>
	            </div>
	        </FormItem>

	        <FormItem v-if="formDynamic.button">
            <Button v-if="formDynamic.button.handleSubmit" type="primary" @click="formDynamic.button.handleSubmit(getFormObj(formDynamic.ref))" :long="formDynamic.button.long">{{formDynamic.button.handleSubmitText}}</Button>
            <Button v-if="formDynamic.button.handleReset" type="ghost" @click="formDynamic.handleReset(getFormObj(formDynamic.ref))" style="margin-left: 8px">{{formDynamic.button.handleResetText}}</Button>
            <Button v-if="formDynamic.button.handleBack" type="ghost" @click="formDynamic.handleBack(getFormObj(formDynamic.ref))" style="margin-left: 8px">{{formDynamic.button.handleBackText}}</Button>
          </FormItem>

	    </Form>
	    <Modal v-model="openImg" :transfer="true" class="form-dynamic-modal">
            <img :src="openImgUrl" v-if="openImg">
            <div slot="footer"></div>
        </Modal>
	</div>
</template>

<script>
export default {
  name: "formDynamic",

  props: {
    formData: {
      type: [Object],
      default: function() {
        return {};
      }
    }
  },

  data: function() {
    return {
      openImg: false,
      openImgUrl: "",
      formDynamic: this.formData
    };
  },

  computed: {},

  methods: {
    getFormObj: function(name) {
      return this.$refs[name];
    },

    test: function() {
      console.log("test");
    },
    uploadHandleView(item) {
      this.openImgUrl = item.value;
      this.openImg = true;
    },
    uploadHandleRemove(item) {
      item.value = "";
    },
    uploadHandleError(error, file) {
      console.log("uploadHandleError");
    },
    uploadHandleSuccess(res, file) {
      console.log("uploadHandleSuccess");
      //let url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
      //this.uploadHandleSuccessCallback ? this.uploadHandleSuccessCallback(res) : '';
    },
    uploadHandleFormatError(file) {
      this.$Modal.warning({
        title: "The file format is incorrect",
        content:
          "File format of " +
          file.name +
          " is incorrect, please select jpg or png."
      });
    },
    uploadHandleMaxSize(file) {
      this.$Modal.warning({
        title: "Exceeding file size limit",
        content: "File  " + file.name + " is too large, no more than 2M."
      });
    },
    uploadHandleBeforeUpload(file) {
      console.log("uploadHandleBeforeUpload", file);
    }
  }
};
</script>

<style lang="less">
.form-dynamic-modal {
  .ivu-modal-wrap {
    z-index: 10000;
    width: 520px;
    height: 500px;
    margin: auto;
    overflow: hidden;
  }

  .ivu-modal-mask {
    z-index: 10000;
  }
}

.formDynamic {
  .upload-bg {
    width: 200px;
    height: 100px;
    line-height: 120px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .upload-preview {
    width: 200px;
    height: 100px;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .upload-preview img {
    width: 100%;
    height: 100%;
  }

  .upload-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    line-height: 100px;
  }

  .upload-preview:hover .upload-cover {
    display: block;
  }

  .upload-cover i {
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    margin: 0 2px;
  }
}
</style>
